<template>
    <el-card class="user-card">
      <div class="user-avatar">
        <el-avatar :size="80" :src="user.avatar" />
      </div>
      <div class="user-info">
        <h4>{{ user.nickname }}</h4>
        <p class="user-bio">{{ user.bio }}</p>
      </div>
      <el-row :gutter="20" class="user-stats">
        <el-col :span="12">
          <div class="stat-item">
            <div class="stat-value">{{ user.following }}</div>
            <div class="stat-label">关注</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="stat-item">
            <div class="stat-value">{{ user.followers }}</div>
            <div class="stat-label">粉丝</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue'


  const user = ref({
    avatar: '',
    nickname: '用户名',
    bio: '个人简介...',
    following: 120,
    followers: 350
  })
  </script>
  
  <style scoped>
  .user-card {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .user-avatar {
    margin: 0 auto 15px;
  }
  
  .user-info h4 {
    margin-bottom: 8px;
  }
  
  .user-bio {
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .user-stats {
    margin-top: 15px;
  }
  
  .stat-item {
    cursor: pointer;
  }
  
  .stat-value {
    font-weight: bold;
    color: var(--el-text-color-primary);
  }
  
  .stat-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
  </style>